<template>
  <div>
    <van-field
      v-model="content"
      :label="label"
      :type="type"
      :placeholder="placeholder"
      :rule="rule"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  props: {
    label: {
      default: '',
      type: String
    },
    type: {
      default: 'text',
      type: String
    },
    placeholder: {
      default: '',
      type: String
    },
    rule: {
      default: '',
      type: String
    }
  },
  watch: {
    content() {
      this.handlrRule()
    }
  },
  methods: {
    handlrRule: function() {
      const rule = new RegExp(this.rule)
      if (rule.test(this.content)) {
        this.$emit('inputChange', this.content)
      }
    }
  }
}
</script>

<style>

</style>